<template>
	<view class="flex-col page">
		<view class="flex-col section_1">
			<!-- <view class="justify-center group">
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621783633159.png"
					class="image" @click="back()" />
				<text class="text">订单详情</text>
			</view> -->
			<view class="justify-between group_1" v-if="ordersStatus == 1">
				<view class="flex-col items-start group_2">
					<text class="text_1">订单待付款</text>
					<view class="u-flex">
						<text class="text_2">剩余时间：</text>
						<u-count-down :time="lefttime" format="HH:mm:ss"></u-count-down>
					</view>

				</view>
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836667858104212.png"
					class="image_1" />
			</view>
			<!--  -->
			<view class="justify-between group_1" v-if="ordersStatus == 2">
				<view class="flex-col items-start group_2">
					<text class="text_1">订单未完善</text>
					<text class="text_2">完善订单信息后进行提交</text>
				</view>
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836667858104212.png"
					class="image_1" />
			</view>
			<!--  -->
			<view class="justify-between group_1" v-if="ordersStatus == 3">
				<view class="flex-col items-start group_2">
					<text class="text_1">订单进行中</text>
				</view>
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836667858104212.png"
					class="image_1" />
			</view>
			<!--  -->
			<view class="justify-between group_1" v-if="ordersStatus == 5">
				<view class="flex-col items-start group_2">
					<text class="text_1">订单已完成</text>
				</view>
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836667858104212.png"
					class="image_1" />
			</view>
		</view>
		<view class="flex-col section_2">
			<view class="flex-row">
				<view class="section_3">
					<!--*-->
				</view>
				<text class="text_3">全流程咨询订单</text>
			</view>
			<view class="justify-between group_4">
				<text class="text_4">你的房屋位置</text>
				<text class="text_5">{{roomA.provinceName}}{{roomA.cityName}}{{roomA.districtName}}</text>
			</view>
			<view class="justify-between group_5">
				<text class="text_6">你的房屋面积</text>
				<text class="text_7">{{roomA.roomArea}}m²</text>
			</view>
			<view class="justify-between group_6">
				<text class="text_8">房屋类型</text>
				<text class="text_9">{{roomA.roomTypeName}}</text>
			</view>
		</view>
		<view class="flex-col section_4">
			<view class="flex-row group_8">
				<view class="section_3">
					<!--*-->
				</view>
				<text class="text_10">全流程咨询</text>
			</view>
			<view class="justify-between group_9" @click="go('/pages/my/order/perfectData')">
				<view class="flex-col">
					<view class="flex-row">
						<text class="text_11">高级设计</text>
						<image :src="imgUrl+'16557826926394646541.png'" class="image_2 image_3" />
					</view>
					<text class="text_12">(含每个软装细节）</text>
				</view>
				<view class="flex-col items-center text-wrapper view_2"><text class="text_13">去完善</text></view>
			</view>
			<view class="justify-between group_12" @click="go('/pages/my/order/perfectData')">
				<view class="flex-col">
					<view class="flex-row">
						<text class="text_11">预算合约审核</text>
						<image :src="imgUrl+'16557826926394646541.png'" class="image_2 image_3" />
					</view>
					<text class="text_16">(含每个软装细节）</text>
				</view>
				<view class="flex-col items-center text-wrapper view_3"><text class="text_13">去完善</text></view>
			</view>
			<view class="flex-col group_15">
				<view class="justify-between" @click="go('/pages/consult/inquiry')">
					<view class="flex-row group_17">
						<text class="text_18">主材100条询价</text>
						<image :src="imgUrl+'16557826926394646541.png'" class="image_2 image_3" />
					</view>
					<view class="flex-col items-center text-wrapper"><text class="text_13">去完善</text></view>
				</view>
				<view class="flex-row group_18">
					<text class="text_11">选材咨询及建议（6小时）</text>
					<image :src="imgUrl+'16557826926394646541.png'" class="image_2 image_3" />
				</view>
				<view class="flex-col group_19">
					<view class="justify-between" @click="go('/pages/my/order/perfectPatrolData')">
						<view class="flex-col">
							<view class="flex-row">
								<text class="text_11">施工巡检高级服务</text>
								<image :src="imgUrl+'16557826926394646541.png'" class="image_2 image_3" />
							</view>
							<text class="text_22">(21次巡检含进度监控）</text>
						</view>
						<view class="flex-col items-center text-wrapper view_5"><text class="text_13">去完善</text></view>
					</view>
					<view class="justify-between group_23" @click="go('/pages/my/order/settlementAuditData')">
						<view class="flex-row group_24">
							<text class="text_11">结算审核服务</text>
							<image :src="imgUrl+'16557826926394646541.png'" class="image_2 image_3" />
						</view>
						<view class="flex-col items-center text-wrapper"><text class="text_13">去完善</text></view>
					</view>
					<view class="divider">
						<!--*-->
					</view>
					<view class="justify-between group_25">
						<text class="text_26">总额</text>
						<text class="text_27">￥{{roomA.totalMoney}}</text>
					</view>
					<!-- <view class="justify-between group_26">
            <text class="text_28">优惠券</text>
            <text class="text_29">-￥{{this.roomA.couponsMoney}}</text>
          </view> -->
					<view class="justify-end group_27">
						<text class="text_30">实付款:</text>
						<view class="group_28">
							<text class="text_31">￥</text>
							<text class="text_32">{{roomA.payableMoney}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex-col section_5">
			<view class="flex-row group_14">
				<view class="section_3 view_2">
					<!--*-->
				</view>
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621826750433.png"
					class="image_2" />
			</view>
			<view class="flex-col group_15">
				<view class="flex-row">
					<text class="text_22">订单编号</text>
					<text class="text_23">{{roomA.ordersNumber}}</text>
				</view>
				<text class="text_24" @click="copy(roomA.ordersNumber)">复制</text>
				<view class="flex-row group_17 u-m-t-40">
					<text class="text_25">下单时间</text>
					<text class="text_26">{{roomA.ordersTime}}</text>
				</view>
			</view>
			<view class="flex-row group_18" v-if="ordersStatus != 1">
				<text class="text_27">付款金额</text>
				<text class="text_28">￥{{roomA.payableMoney}}</text>
			</view>
			<view class="flex-row group_19" v-if="ordersStatus != 1">
				<text class="text_29">支付方式</text>
				<text class="text_30" v-if="roomA.payType ==1">微信支付</text>
				<text class="text_30" v-else>支付宝支付</text>
			</view>
			<view class="flex-row group_20" v-if="ordersStatus != 1">
				<text class="text_31">支付时间</text>
				<text class="text_32">{{roomA.payTime}}</text>
			</view>
		</view>
		<view class="justify-between section_6">
			<view class="flex-row group_21">
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621862755728.png"
					class="image_3" />
				<text class="text_33" @click="go('/pages/my/message/kefu')">联系客服</text>
			</view>
			<view class="flex-row" v-if="ordersStatus == 1">
				<view class="flex-col items-center text-wrapper_22" @click="qupj"><text class="text_35">取消订单</text>
				</view>
				<view class="flex-col items-center text-wrapper_21" @click="qupj"><text class="text_35">去付款</text>
				</view>
			</view>

			<!--  -->
			<view class="flex-col items-center image-wrapper" v-else-if="this.ordersStatus == 2">
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836721743582919.png"
					class="image_4" />
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				imgUrl: this.$IMG_URL,
				ordersStatus: '',
				ordersId: '',
				roomA: '',
				lefttime: 0,
				couponsMoney: ''
			};
		},
		onLoad(option) {
			this.ordersStatus = option.ordersStatus;
			this.ordersId = option.ordersId;
		},
		onPullDownRefresh() {
			console.log('rrrr');
			this.init();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		created() {
			this.init();
		},
		methods: {
			init() {
				this.getdetails()
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			copy(number) {

			 uni.setClipboardData({
					data: number,
					success: (result) => {
						this.$u.toast('复制成功');
					},
					fail: (error) => {
						this.$u.toast('网络出错');
					}
				})
			},
			timeProcessing(e) {
				let timeDate = e;
				let Time = new Date(timeDate);
				let timestemp1 = Time.getTime();
				let timestamp2 = new Date().getTime();

				return timestemp1 + 86400000 - timestamp2;
			},
			getdetails() {
				this.$http('oteherL.getQLCZXdetails', {
					ordersId: this.ordersId,
				}).then(res => {
					if (res.code == 200) {
						console.log(res.data);
						this.lefttime = this.timeProcessing(res.data.ordersTime);
						this.roomA = res.data.orders;
						if (res.data.orders.couponsMoney) {
							this.couponsMoney = res.data.orders.couponsMoney
						} else {
							this.couponsMoney = 0
						}
					} else {
						this.$u.toast(res.msg);
					}
				});
			}
		},
	};
</script>

<style scoped lang="scss">
	.divider {
		margin-top: 32rpx;
		background-color: #eeeeee;
		border-radius: 0.5rpx;
		height: 1rpx;
	}

	.text_26 {
		margin-bottom: 6rpx;
		color: #999999;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	::v-deep .u-count-down__text {
		color: #D3F9FF;
		font-size: 28rpx;
	}

	.text_27 {
		margin-top: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_29 {
		margin-top: 6rpx;
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_28 {
		margin-bottom: 6rpx;
		color: #999999;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.group_25 {
		margin-top: 30rpx;
	}

	.group_26 {
		margin-top: 33rpx;
	}

	.group_27 {
		margin-top: 34rpx;
		padding-top: 27rpx;
		padding-bottom: 10rpx;
		border-top: solid 1rpx #eeeeee;
	}

	.image_5 {
		margin-left: 12rpx;
		margin-top: 8rpx;
		flex-shrink: 0;
	}

	.text-wrapper {
		padding: 2rpx 0 12rpx;
		background-color: #1d6aff;
		border-radius: 20rpx;
		width: 114rpx;
		height: 40rpx;
	}

	.view_2 {
		margin-top: 25rpx;
	}

	.text_13 {
		color: #ffffff;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';

	}

	.group_9 {
		padding-top: 23rpx;
	}

	.text-wrapper_21 {
		padding: 7px 0 11px;
		background-color: #1d6aff;
		border-radius: 16px;
		width: 86px;
		height: 32px;
	}

	.text_35 {
		color: #fff;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text-wrapper_22 {
		padding: 7px 0 11px;
		background-color: #eee;
		border-radius: 16px;
		width: 86px;
		height: 32px;
		margin-left: 100rpx;
		margin-right: 20rpx;
	}

	.text-wrapper_22 .text_35 {
		color: #333;
	}

	.text_11 {
		margin-bottom: 3rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.section_3 {
		margin-top: 12rpx;
		background-color: #1d6aff;
		border-radius: 3rpx;
		width: 6rpx;
		height: 28rpx;
	}

	.page {
		background-color: #f6f7f9ff;
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.section_1 {
		padding: 55rpx 24.5rpx 143rpx;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621628592893.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.section_2 {
		margin: -109rpx 24rpx 0;
		padding: 30rpx 22rpx 40rpx 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		position: relative;
	}

	.section_4 {
		margin: 20rpx 24rpx 0;
		padding-left: 24rpx;
		padding-right: 22rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.section_5 {
		margin: 20rpx 24rpx 0;
		padding: 0 24rpx 34rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.section_6 {
		margin-top: 32rpx;
		padding: 18rpx 24rpx 18rpx 34rpx;
		background-color: #ffffff;
		box-shadow: 0px -1rpx 0px 0px #eeeeee;
	}

	.group {
		padding: 0 7.5rpx 4rpx;
		position: relative;
	}

	.group_1 {
		margin-top: 43rpx;
	}

	.group_4 {
		margin-top: 38rpx;
	}

	.group_5 {
		margin-top: 31rpx;
	}

	.group_6 {
		margin-top: 25rpx;
	}

	.group_7 {
		padding: 29rpx 4rpx 32rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.text_12 {
		margin-top: 15rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.group_8 {
		margin-top: 65rpx;
		padding: 31rpx 0 30rpx;
		border-top: solid 1rpx #eeeeee;
	}

	.group_14 {
		padding: 28rpx 0 32rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_15 {
		margin-top: 29rpx;
	}

	.group_18 {
		margin-top: 31rpx;
	}

	.group_19 {
		margin-top: 31rpx;
	}

	.group_20 {
		margin-top: 37rpx;
	}

	.group_21 {
		align-self: center;
	}

	.image-wrapper {
		padding: 12rpx 0 22rpx;
		background-color: #1d6aff;
		border-radius: 32rpx;
		width: 172rpx;
		height: 64rpx;
	}

	.image {
		position: absolute;
		left: 7.5rpx;
		bottom: 0;
		width: 19rpx;
		height: 36rpx;
	}

	.text {
		color: #ffffff;
		font-size: 36rpx;
		font-family: '.AppleSystemUIFont';

	}

	.group_2 {
		padding-bottom: 6rpx;
		width: 300rpx;
		position: relative;
	}

	.image_1 {
		margin-right: 40.5rpx;
		margin-top: 6rpx;
		filter: drop-shadow(0px 3rpx 3rpx #1a60e266);
		width: 70rpx;
		height: 80rpx;
	}

	.text_3 {
		margin-left: 18rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_4 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_5 {
		margin-right: 3rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_6 {
		margin-bottom: 6rpx;
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_7 {
		margin-top: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_8 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_9 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_10 {
		margin-left: 18rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';

	}

	.group_10 {
		margin-top: 33rpx;
	}

	.view_2 {
		margin-top: 13rpx;
	}

	.image_2 {
		margin-left: 17rpx;
		width: 132rpx;
		height: 40rpx;
	}

	.text_24 {
		margin-top: -16px;
		margin-right: 267rpx;
		align-self: center;
		color: #1c4ca8;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.group_17 {
		margin-top: 9rpx;
	}

	.text_27 {
		margin-bottom: 6rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_28 {
		margin-left: 40rpx;
		margin-top: 6rpx;
		color: #fe641a;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_29 {
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_30 {
		margin-left: 40rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_31 {
		margin-bottom: 6rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_32 {
		margin-left: 40rpx;
		margin-top: 6rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.image_3 {
		flex-shrink: 0;
		width: 36rpx;
		height: 35rpx;
	}

	.text_33 {
		margin-left: 18rpx;
		margin-bottom: 8.5rpx;
		color: #191919;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.image_4 {
		width: 75rpx;
		height: 30rpx;
	}

	.text_1 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_2 {
		color: #ffffff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.text_15 {
		margin-bottom: 6rpx;
		color: #999999;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_16 {
		margin-top: 15rpx;
		align-self: flex-start;
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.group_11 {
		padding-bottom: 35rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_12 {
		padding-top: 26rpx;
	}

	.text_22 {
		margin-bottom: 6rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_23 {
		margin-left: 40rpx;
		margin-top: 6rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_25 {
		margin-bottom: 6rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_26 {
		margin-left: 40rpx;
		margin-top: 6rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_17 {
		margin-bottom: 6rpx;
		color: #999999;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_18 {
		margin-top: 6rpx;
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_19 {
		margin: 7rpx 16rpx 3rpx 0;
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.group_13 {
		height: 38rpx;
	}

	.text_20 {
		color: #fe641a;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_21 {
		color: #fe641a;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';

	}
</style>
